<nav class="navbar navbar-toggleable-sm navbar-light bg-faded navbar-inverse bg-primary fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isCollapsed = !isCollapsed">
    <span class="navbar-toggler-icon"></span>
    <span class="badge badge-warning">{{untreatedMessagesNumber.number | async | plus9}}</span>
  </button>
  <a class="navbar-brand" routerLink="/">{{'ConnectedPDF' | translate}}</a>

  <div class="collapse navbar-collapse" [collapse]="!isCollapsed">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item message-number" *ngIf="untreatedMessagesNumber.number | async">
        <a class="nav-link text-capitalize" routerLink="/messages/untreated">
          <i class="fa fa-bell"></i>
          {{'untreatedMessages' | translate}}
          <span class="badge badge-warning">{{untreatedMessagesNumber.number | async | plus9}}</span>
        </a>
      </li>
      <li class="nav-item dropdown" *ngIf="auth.userInfo | async as user" dropdown>
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;" role="button" dropdownToggle >
          <img class="avatar" [src]="user.avatar">
          <span class="nickname">{{user.nickName || user.email}}</span>
        </a>
        <div class="dropdown-menu dropdown-menu-right text-capitalize" *dropdownMenu>
          <a class="dropdown-item" routerLink="/users/profile"><i class="fa fa-user"></i> {{'profile' | translate}}</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:;" (click)="signOut()"><i class="fa fa-sign-out"></i> {{'signOut' | translate}}</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
